<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/hw1.css">
	</head>
	<body>
		<!-- F1：顶部搜索条 -->
		<div class="f1">
			<div class="container">
				<!-- 左边 -->
				<div class="left">
					<img src="img/logo.png">
				</div>
				<!-- 中间 -->
				<div class="center">
					<div class="search">
						<input type="text">
						<img src="img/search.png">
					</div>
				</div>
				<!-- 右边 -->
				<div class="right">
					<ul class="menu">
						<li><img src="img/care.png"></li>
						<li>|</li>
						<li><img src="img/order.png"></li>
						<li>|</li>
						<li><img src="img/shop_car.png"></li>
						<li>|</li>
						<li><a href="#">注册</a></li>
						<li>|</li>
						<li><a href="#">登录</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- F2：导航条 -->
		<div class="f2">
			<div class="container">
				<ul class="nav">
					<li><a href="#">首页</a></li>
					<li><a href="#">学习用品</a></li>
					<li><a href="#">私人订制</a></li>
					<li><a href="#">新手指南</a></li>
					<li><a href="#">学习园地</a></li>
					<li><a href="#">信息服务</a></li>
				</ul>
			</div>
		</div>
		<!-- F3：广告栏 -->
		<div class="f3" style="height: 300px;">
			<div class="container">三楼-相对定位+绝对定位</div>
		</div>
		<!-- F4：主体-商品列表 -->
		<div class="f4">
			<div class="container">
				<!-- 左侧 -->
				<div class="left">
					<div class="top">笔记本电脑</div>
					<div class="list">
						<!-- 此处经过分析，不是三行三列，而是一行九列 -->
						<div class="product"><div>1</div></div>
						<div class="product"><div>2</div></div>
						<div class="product"><div>3</div></div>
						<div class="product"><div>4</div></div>
						<div class="product"><div>5</div></div>
						<div class="product"><div>6</div></div>
						<div class="product"><div>7</div></div>
						<div class="product"><div>8</div></div>
						<!-- <div class="product">9</div> -->
					</div>
					<div class="footer">
						<ul class="pager">
							<li><a href="#">上一页</a></li>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">下一页</a></li>
						</ul>
					</div>
				</div>
				<div class="right">
					<h3>商家公共</h3>
					<p>公告内容</p>
					<div class="cart">购物车</div>
				</div>
			</div>
		</div>
		<!-- F5：底部功能菜单 -->
		<div class="f5">
			<div class="container">
				<div class="item">1</div>
				<div class="item">2</div>
				<div class="item">3</div>
				<div class="item">4</div>
			</div>
		</div>
		<!-- F6：底部功能列表+版权声明 -->
		<div class="f6">
			<div class="container">六楼</div>
		</div>
	</body>
</html>
